<template>
    <has-left-nav-layout>
        <template v-slot:leftNav>
            <div class="left-menu">
            </div>
        </template>
         <div class="leftShopBox">
             <div>
            <div class="shopInfoBox">
                    <div class="topbox">
                        <div class="imgbox">
                            <cutImageGoodsDetail :url='details.headImageUrl'/>
                        </div>
                        <div class="toptxt">
                            <h5>{{details.shopName}}</h5>
                            <div class="renzh">
                                <span v-t="'shop.text6'">Authorization</span>
                            </div>
                        </div>
                    </div>
                    <div class="star2">
                                <label v-t="'shop.text7'">Recommended</label>
                                <van-rate v-model="details.indexStar" :readonly="true" allow-half size='10px' color="#CFFFFF"/>
                            </div>
                        <div class="star2">
                        <div class="look" @click="showFlag=true">{{text8}} <i class="icon" /></div>
                                <my-dailog :show="showFlag" :showtopclose="true" @close="showFlag=false" :styleType="20" maxWidth="85%">
                                    <cut-border-box>
                                        <div class="imgPreviewBox">
                                             <ul class="imgList">
                                                <li v-if="details.credentialsBrandImageUrl">
                                                    <img :src="details.credentialsBrandImageUrl" alt=""> 
                                                </li>
                                                  <li v-if="details.credentialsLicenseImageUrl">
                                                    <img :src="details.credentialsLicenseImageUrl" alt=""> 
                                                </li>
                                                  <li v-if="details.credentialsOtherImageUrl">
                                                    <img :src="details.credentialsOtherImageUrl" alt=""> 
                                                </li>
                                            </ul>
                                        </div>
                                    </cut-border-box>
                                </my-dailog>
                    </div>
                    <div class="shopTxt">
                        <div class="title" v-t="'shop.text9'">Contact Details</div>
                        <p>{{details.introduction}}</p>
                    </div>
                    <div class="star2">
                        <div class="look" >{{text10}} <i class="icon" /> </div>
                            <!-- <my-dailog :show="showFlagStore" :showtopclose="true" :styleType="20" maxWidth="85%">
                                    <cut-border-box>
                                        <div class="imgPreviewBox">
                                            <ul class="imgList">
                                                <li v-if="details.credentialsBrandImageUrl">
                                                    <img :src="details.credentialsBrandImageUrl" alt=""> 
                                                </li>
                                                  <li v-if="details.credentialsLicenseImageUrl">
                                                    <img :src="details.credentialsLicenseImageUrl" alt=""> 
                                                </li>
                                                  <li v-if="details.credentialsOtherImageUrl">
                                                    <img :src="details.credentialsOtherImageUrl" alt=""> 
                                                </li>
                                            </ul>
                                        </div>
                                    </cut-border-box>
                                </my-dailog> -->
                    </div>
                    <div class="star2">
                        <div class="look"><i class="local" /> </div>
                        <div class="right-text">
                            No. 80, Hetang Road, Yubei District Chongqing
                        </div>
                    </div>
                    <div class="star2" v-if="details.imageUrlsPhysical && details.imageUrlsPhysical.length>0" >
                        <div class="look" @click="showFlagStore=true" >{{text11}}  <i class="icon" /></div>
                                <my-dailog :show="showFlagStore" 
                                    :showtopclose="true" 
                                    @close="showFlagStore=false"
                                    :styleType="20" maxWidth="85%">
                                    <cut-border-box>
                                        <div class="imgPreviewBox">
                                            <ul class="imgList">
                                                <li v-for="dt in details.imageUrlsPhysical" :key="dt">
                                                    <img :src="dt" alt=""> 
                                                </li>
                                            </ul>
                                        </div>
                                    </cut-border-box>
                                </my-dailog>
                    </div>
                    <div class="shopTxt1">
                         <div class="title" v-t="'shop.text12'">Opening time</div>
                        <p>{{moment(details.shopCreateTime).format('YYYY-MM-DD')}}</p>
                    </div>
                    <div class="shopTxt1">
                         <div class="title" v-t="'shop.text13'">Transaction in recent 30 days</div>
                        <p class="em">{{details.transactionCount30}}</p>
                    </div>
            </div>
             <div class="coupons-lq" @click="btnGoUrl" v-if="couponList.length>0">
                 <img class="icon" src="/images/c-s.png" />
                 <div class="num">{{couponList[0].couponAmount?.decimalTwoString}}</div>
             </div>
             </div>
            <div class="right-shop-view">
                <main-wrap :loading="true" ref="mianEle" :load="onLoad" :end="page.finished" :noFixed="true" 
                bodyBg="none" :showOverTxt="page.lists.length>0">
                    <template v-slot:header>
                        <div class="adheader">
                            <div class="hcon">
                                <div class="shopLetfTop">
                                    <b>{{total}}</b> {{totalText}}
                                </div>
                                <div class="topSearch">
                                    <div class="tswd">
                                        <my-search :placeholder="search" v-model="keyword" @onSearch="getSearchData"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                    <div class="goodsMainCon">
                        <div class="ctgbox shopdtflbox" v-if="goodsCategorys.length>0">
                            <two-tab v-model="goodsCategoryId" :lists="goodsCategorys" @change="getSearchData" 
                             keyValue="goodsCategoryId" numValue='goodsNum'/>
                        </div>
                        <!-- <div></div> -->
                        <div class="goodsTabSearchBox">
                            <sort :lists="tabList" @change="getSortData"/>
                        </div>
                        <goods-list :lists="page.lists"  :type="1"/>
                        <empty v-if="page.finished && page.lists.length<1"/>
                    </div>
                </main-wrap>
            </div>
         </div>
    </has-left-nav-layout>
</template>

<script>
import {reactive,toRefs, onMounted,getCurrentInstance,computed } from 'vue'
import { useStore } from 'vuex'
import {useRoute,useRouter} from 'vue-router'
import {Rate as vanRate} from 'vant'
import moment from 'moment'
import mainWrap from '@/components/mainWrap.vue'
import {toast} from '@/utils/common.js'
import oneTab from '@/components/oneTab.vue';
import mySearch from '@/components/mySearch.vue'
import Image from '@/components/image.vue';
import myTab from '@/components/myTab.vue';
import goodsList from '@/components/goodsList.vue';
import sort from '@/components/sort.vue';
import twoTab from '@/components/twoTab.vue'
import Title from '@/components/title.vue';
import myDailog from '@/components/myDailog.vue'
import cutImageGoodsDetail from '@/components/cutImageGoodsDetail.vue'
import empty from '@/components/empty.vue'
import cutBorderBox from '@/components/cutBorderBox.vue' 
import returnGoodsVue from '../coupons/detail/components/returnGoods.vue';
import { useI18n } from 'vue-i18n'

export default {
    components:{
        mainWrap,
        oneTab,
        mySearch,
        Image,
        myTab,
        goodsList,
        sort,
        twoTab,
        Title,
        myDailog,
        cutImageGoodsDetail,
        empty,
        cutBorderBox,
        vanRate
    },
    setup(){
        const store = useStore()
        const router = useRouter()
        const route = useRoute()
        const {proxy} = getCurrentInstance()
        const {t} = useI18n()
        const state = reactive({
             userInfo:computed(()=>store.state.base.userInfo),
            id:'', // 店铺id
            keyword:'',
            details:'',
            goodsCategoryId:'',
            goodsCategorys:[],
            page:{
                lists:[],
                pageIndex:1,
                pageSize:12,
                finished: false
            },
            sortParams:{
                orderField: 1,
                orderType: "desc",
            },
            showFlag:false,
            openShop:false,
            showFlagStore:false,
            total:0,
            couponList:[],
            totalText:t('public.total'),
            search:t('public.search'),
            text8:t('shop.text8'),
            text10:t('shop.text10'),
            text11:t('shop.text11'),
            tabList:[{id:1,name:t('shop.text4'),noShow:true},{id:2,name:t('shop.text5')}]

        })

        onMounted(()=>{
           state.id = route.params.id
           getDetail()
           onLoad()
           getGoodsCtg()
          
        })


     const getReceive = ()=>{ //获取是否有优惠价
            store.dispatch('shop/couponListAddressShop',{
                shopId:state.id,
                walletAddress:state.userInfo.walletAddress
            }).then(res=>{
                if(res.success){
                    state.couponList = res.data||[]
                    state.couponList.filter((item)=>{
                        return item.userReceiveStatus ==1
                    })
                }
            })
        }  
        const getDetail = ()=>{
            store.dispatch('shop/get_shop_detail',{
                 shopId:state.id,
                 walletAddress:state.keyword,
            }).then(res=>{
                state.details = res.data
                 getReceive()
            })
        }  

      const btnGoUrl = ()=>{
          router.push({path:'/receive/'+state.id})
    }  
        
        const onLoad = ()=> {
            // 此函数必须返回一个Promise对象
            return new Promise((resolve, reject) => {
                setTimeout(async () => {
                    const res = await store.dispatch("shop/get_goods_list", {
                        page: state.page.pageIndex,
                        limit: state.page.pageSize,
                        ...state.sortParams,
                        goodsCategoryId:state.goodsCategoryId,
                        keyWord:state.keyword,
                        shopId:state.id
                    });
                    state.page.lists = [...state.page.lists, ...res.data];
                    state.page.pageIndex++;
                    state.total = res.total
                    if (state.page.lists.length >= res.total) {
                        state.page.finished = true;
                    }
                    resolve(true);
                }, 500);
            });
        }

        const getGoodsCtg = ()=>{
            store.dispatch('shop/get_goods_type_list',{
                goodsName: '',
                shopId: state.id
            })
            .then(res =>{
                const goodsTotal = res.data.reduce(function(total,item){return total+item.goodsNum},0)
                state.goodsCategorys = [{goodsCategoryId:'',name:'全部',goodsNum:goodsTotal},...res.data]
            })
        }

        const resetScroll = async()=>{
            proxy.$refs.mianEle.stopScroll()
            state.page.lists=[]
            state.page.pageIndex=1
            state.page.finished=false
            await onLoad()
            proxy.$refs.mianEle.initScroll()
        }
        const getSearchData = async(keyword)=>{
            resetScroll()
        } 
        // const ctgGetData = ctgId=>{
        //     state.goodsCategoryId = ctgId
        // }
        const getSortData = sortParams =>{
            state.sortParams = sortParams
            resetScroll()
        }
         const btnLeftMenu = () =>{
          state.openShop = true
        }
       
        return {
            ...toRefs(state),
            onLoad,
            getSearchData,
            //ctgGetData,
            getSortData,
            btnLeftMenu,
            moment,
            getReceive,
            btnGoUrl
        }
    }
}
</script>

<style lang="scss" scoped>
    .leftShopBox{
        box-sizing: border-box;
        display: flex;
        align-self: flex-start;
        align-items: flex-start;
        justify-content: flex-start;
        width:100%;
        .shopInfoBox{
            width: 500px;
            padding:30px;
            min-height: 400px;
            max-height:550px;
            overflow-y: scroll;
            background: url(/images/dgbg9.png) left top no-repeat;
            background-size:100% 100%;
            margin-top:80px;
            .topbox{
                display: flex;
                height: 100px;
                flex-shrink: 0;
                .imgbox{
                    width: 80px;
                    height: 80px;
                }
                .toptxt{
                    flex: 1;
                    padding: 0 0 0 15px;
                    h5{
                        font-size: 28px;
                        padding: 0;
                        margin: 0;
                         color: #67F8FF;
                        font-family: Poppins-SemiBold, Poppins;
                        font-weight: 600;
                        line-height: normal;
                        //-webkit-background-clip: text;
                        //-webkit-text-fill-color: transparent;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    .renzh{
                        margin: 8px 0 0 0;
                        height:30px ;
                        overflow: hidden;
                        span{
                            float: left;
                            font-size: 20px;
                            font-family: Inter-Medium, Inter;
                            font-weight: 500;
                            background-color: #67F8FF;
                            height: 30px;
                            line-height:30px;
                            overflow: hidden;
                            border-radius:20px ;
                            padding: 4px 15px;
                            flex-shrink: 0;
                            color: #004AD9;
                        } 
                    }
          
                  
                }
            }
            .star2{
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        label{
                            font-size: 24px;
                            font-family: Poppins-Medium, Poppins;
                            font-weight: 500;
                            color:#fff;
                            margin: 0 20px 0 0;
                        }
                        i{
                            font-size: 24px;
                            color: #CCFFFF;
                        }
                        .look{
                            font-size: 28px;
                            font-family: Poppins-Medium, Poppins;
                            font-weight: 500;
                            color: #67F8FF;
                            margin-top:10px;
                            .icon{
                                 background-image: url(/images/shop/r.png);
                                background-size:contain;
                                padding:6px;
                                background-position: center;
                                background-repeat: no-repeat;
                                margin-left:10px;
                            }
                            .local{
                                 background-image: url(/images/shop/l.png);
                                background-size:contain;
                                padding:10px 15px;
                                background-position: center;
                                background-repeat: no-repeat;
                                margin-left:10px;
                            }
                        }
                        .right-text{
                            color: #67F8FF;
                            font-size:24px;
                            padding-left:10px;
                        }
            }
            .shopTxt1,
            .shopTxt{
                padding: 10px 0 0 0;
                flex-shrink: 0;
                flex: 1;
                overflow: hidden;
                overflow-y: auto;
                max-height: 300px;
                .title{
                      font-size: 28px;
                       color: #fff;  
                }
                p{
                    font-size: 20px;
                    color: #ffffff50;
                    line-height: 34px;
                    font-family: Poppins-Medium, Poppins;
                    font-weight: 500;
                    padding: 5px 0 10px 0;
                    word-wrap:break-word;
                    word-break:normal; 
                    
                }
            }
            .shopTxt1{
                display: flex;
                justify-content:space-between;
                 p{
                    color:#fff;
                    font-size:24px;
                 }
                 p.em{
                    color: #67F8FF;
                    font-size:28px;
                 }
            }
            .jcRecord{
                display: flex;
                padding: 0 0 40px 0;
                flex-shrink: 0;
                p{
                    width: 450px;
                    font-size: 20px;
                    line-height: 28px;
                    color: #fff;
                    font-family: Inter-Medium, Inter;
                    font-weight: 500;
                }
                em{
                    flex: 1;
                    text-align: right;
                    font-size: 32px;
                    font-style: normal;
                    font-family: Inter-Medium, Inter;
                    font-weight: 500;
                }
            }
        }
        .coupons-lq{
            background-image:url('/images/r-coupon.png');
            background-size:100% 100%;
            height:120px;
            width:200px;
            background-repeat: no-repeat;
            background-position: center;
            margin:10px auto;
            text-align: center;
            padding:10px 0;
            .icon{
                width:24px;
            }
            .num{
                font-size:28px;
                color:#fff;
            }
        }
        .right-shop-view{
            margin-left:20px;
            height: 98vh;
            width:1200px;
            overflow-y: scroll;
        }
    }
    .adheader{
         padding: 15px 30px 15px 0;
        .hcon{
            display: flex;
            height: 80px;
            line-height: 80px;
            align-items: center;
            .shopLetfTop{
                padding: 0;
                font-size: 30px;
                font-weight: 500;
                b{
                    color: #82FEF4;
                }
            }
            .topSearch{
                flex: 1;
                // display: flex;
                // justify-content: end;
                .tswd{
                    float:right;
                    width: 550px;
                }
            }
        }
    }
    .left-menu{
        width:100px;
        height:100%;
        position: relative;
        .btn-menu{
            position: absolute;
            background: url(/images/left-menu.png) left top no-repeat;
            background-size: 100% 100%;
            top:50%;
            left:10px;
            margin-top:-50px;
            height:100px;
            width:24px;
            z-index:999;
        }
       
    }
    .goodsMainCon{
        padding: 10px 30px 0 0;
    }
    .goodsTabSearchBox{
        display: inline-block;
        height: 55px;
        background: url(/images/gloabAdSplace/tsc.png) left top no-repeat;
        background-size: 100% 100%;
        padding: 0 30px;
    }
    .shopdtflbox{
        // display: inline-block;
        padding: 0 0 20px 0;
    }
    .imgPreviewBox{
        width: 100%;
        height: 100%;
        padding: 10px 40px ;
        .imgList{
            display: flex;
            box-sizing: border-box;
            height: 100%;
            width: 100%;
            padding: 0;
            overflow: hidden;
            overflow-x: auto;
            li{
                display: flex;
                height: 100%;
                flex-shrink: 0;
                margin: 0 20px 0 0;
                justify-content: center;
                align-items: center;
                img{
                    display: block;
                    height: 500px;
                    //max-width: 100%;
                }
            }
        }
    }

</style>
<style lang="scss">
    .star2 .van-rate__item:not(:last-child){
        padding-right: 5px;
    }
</style>